<script lang="ts" setup>
import { SegmentGroup } from '@ark-ui/vue/segment-group';
import { type PropType } from 'vue';

interface Tabitem {
  name: string;
  value: string;
  text: string;
}

const props = defineProps({
  pathPrefix: {
    type: String,
    default: '',
  },

  items: {
    type: Array as PropType<Tabitem[]>,
    default: () => [],
  },
})

const current = defineModel<string>();

// const tabList = props.tabList
// const emit = defineEmits(['tabChange']);
// const chooseChild = (child: any, childItem: any) => {
//   child.forEach((element: { isActive: boolean; }) => {
//     element.isActive = false
//   });
//   childItem.isActive = true
//   emit('tabChange', childItem.val);
// };
</script>

<template>
  <SegmentGroup.Root v-model="current" id="component-tab-navigation" orientation="horizontal" class="rounded-2 bg-hex-fff shadow-[0px_1px_6px_0px_rgba(0,0,0,0.04)]">
    <div class="relative flex gap-30 border-b-1 rounded-2 bg-hex-fff px-20">
      <SegmentGroup.Item as-child v-for="item in props.items" :key="item.name" :value="item.name">
        <RouterLink
          class="h-48 min-w-44 bg-hex-fff px-0 text-center leading-48 no-underline focus-visible:outline-unset"
          :to="`${props.pathPrefix}${item.name}`"
        >
          {{ item.text }}
        </RouterLink>
      </SegmentGroup.Item>
      <SegmentGroup.Indicator />
    </div>
    <!-- <Tabs.Content v-for="el in tabList" :key="el.val" :value="el.val">
      <div v-if="el?.child && el?.child.length" class="relative rounded-2 bg-hex-fff px-27 py-15">
        <span class="min-w-44 bg-hex-fff px-0">标签：</span>
        <button @click="chooseChild(el?.child, childItem)" class="mx-10 min-w-44 bg-hex-fff hover:color-hex-345de2" :class="{ 'active': childItem.isActive }" v-for="childItem in el?.child" :key="childItem.val">{{ childItem.label }}</button>
      </div>
    </Tabs.Content> -->
  </SegmentGroup.Root>
</template>

<style lang="scss" scoped>
[data-scope=segment-group][data-part=item]:hover {
  color: #345de2;
}

[data-scope=segment-group][data-part=item][data-state=checked] {
  color: #345de2;
}

[data-scope=segment-group][data-part="indicator"] {
  bottom: 0;
  min-width: 44px;
  height: 1px;
  background: #345de2;
}

.active {
  color: #345de2;
}
</style>
